<template>
    <div id="right-bar" style="width: 100%; height: 400px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'

import echarts from '@/echarts'

import { option } from './constant'
import { result } from '../../constant'

export default defineComponent({
    name: 'RightBar',
    setup() {
        const constant = {
            option
        }
        onMounted(() => {
            let data = [
                {
                    name: '线上销售',
                    value: ''
                },
                {
                    name: '线下销售',
                    value: ''
                }
            ]
            result.forEach((item: any) => {
                data[0].value += item.OnlineStore
                data[1].value += item.offlineStore
            })
            constant.option.series[0].data = result.map((item: any) => {
                return {
                    name: item.countyName,
                    value: +item.totalSales
                }
            })
            echarts.init(document.getElementById('right-bar')).setOption(constant.option)
        })
        return {
            ...constant
        }
    }
})
</script>
